<template>
    <Spin fix  v-if="loaddingMask">
        <Icon :type="type==='flower'?'ios-flower-outline':type==='setting'?'ios-cog':type==='leaf'?'leaf':'load-a'"
                :size="size" 
                class="spin-icon-load"></Icon>
        <div :class="color==='red'?'red':color==='blue'?'blue':color==='yellow'?yellow:'blue'"><strong>玩命加载中...</strong></div>
    </Spin>
</template>
<script>
    export default{
        name:'Masklayer',
        props:{
           loaddingMask:{
               type:Boolean,
               default:false,
           },
           type:{
               type:String,
               default:'load-a'
           },
           size:{
               type:Number,
               default:50,
           },
           color:{
               type:String,
               default:'#fff'
           }
        }
    }
</script>
<style>
    .blue{
        color:#2d8cf0;
    }
    .red{
        color:#ff00b3;
    }
    .yellow{
        color:yellow;
    }
    .ivu-spin-fix .ivu-spin-main{
        position: fixed;
        left:55%;
    }
    .ivu-spin-fix{
        min-width: 1000px;
        background-color:rgba(0,0,0,.7) ;
        color:#fff;
    }
    .ivu-spin-fix strong{
        margin:5px 0 0 10px;
        display:block;
    }
    .spin-icon-load{
        animation:ani-demo-spin 1.5s linear infinite;
    }
    .spin-icon-load-reverse{
        animation:ani-demo-spin-reverse 1.5s linear infinite;
        margin-left:-5px;
    }
    @keyframes  ani-demo-spin {
        from{transform:rotate(0deg);color:#ff00b3;}
        50%{transform:rotate(180deg);color:#06eff7;}
        to{transform:rotate(360deg);color:#f7f306;}
    }
    @keyframes ani-demo-spin-reverse{
        from{transform:rotate(0deg);color:#ff00b3;}
        50%{transform:rotate(-180deg);color:#06eff7;}
        to{transform:rotate(-360deg);color:#f7f306;}
    }
</style>

